import { View, Image, Text } from "@tarojs/components"
import { TBar, TBlock, TPage, TSwiper } from "../../../shared/ui"
import menu from '../../../theme/invest/menu.png'
import * as Rest from '../../service'
import { useEffect, useState } from "react"
import { Product } from "../../block"
import { useDidHide, useDidShow } from "@tarojs/taro"
const Main = () => {
  const [tabList, setTabList] = useState<{ title: string, id: number, key: string }[]>([])
  const [productList, setProductList] = useState<{ productName: string, id: number, rate: number, period: number, min: number }[]>([])
  const [highlightId, setHighlightId] = useState(1)
  const [actTab, setActTab] = useState()

  const [show, setShow] = useState(true)
  useDidShow(() => {
    setShow(() => { return true })
  })
  useDidHide(() => {
    console.log('hide')
    setShow(() => { return false })
  })
  const initTabList = async () => {
    const res = await Rest.getTabList()
    if (res.code == 0) {
      try {
        const { data } = res
        setTabList(data)
      } catch (error) {

      }
    }
  }

  useEffect(() => {
    tabChange('all')
    initTabList()
  }, [])

  const getProduct = async (key) => {
    const res = await Rest.getProduct(key)
    if (res.code == 0) {
      try {
        const { data } = res
        setProductList(data)
      } catch (error) {

      }
    }
  }
  const tabChange = (key) => {
    getProduct(key)
    setActTab(key)
  }

  const SwiperItem = (props) => {

    const { title, id, act, item, onClickMethod } = props
    return (
      <View className="w-max h-[68px] mx-[48px] flex items-center justify-center flex-col text-[#8F8F90]" onClick={() => { onClickMethod(id, item) }}>
        <Text className={`${act === item.key ? 'text-[#ffffff] text-[40px]' : 'text-[32px]'}`}>
          {
            title
          }
        </Text>
        {
          item.key === act && <View className="w-full h-[4px] bg-[#007BFF]"></View>
        }
      </View>
    )
  }
  return show && <TPage>
    {/* 标题 复制即可  */}

    <TBar title={'投资'}>
      <View className="flex items-center absolute right-[40px] top-[20px]">
        <Image src={menu} className="w-[48px]" mode="widthFix" />
        <Text className="text-white text-[28px] px-[10px]">订单</Text>
      </View>
    </TBar>
    <TBlock classNames="fixed z-10 bg-page top-[88px] left-0">
      <TSwiper list={tabList} SwiperItem={SwiperItem} swiperProps={{ act: actTab }} onSwiperItemClick={(e, item) => { tabChange(item.key) }}>
      </TSwiper>
    </TBlock>
    <TBlock classNames="pt-[120px]">
      {
        productList.map((item) => {
          return (
            <Product item={item} key={item.id} highlightId={highlightId} onClickMet={(id) => { setHighlightId(id) }} />
          )
        })
      }
    </TBlock>
  </TPage >
}

export default Main
